@import "./builder.scss";

page {
    /* 定义一些主题色及基础样式 */
    font-family: PingFang SC, Arial, Hiragino Sans GB, Microsoft YaHei, sans-serif;
    font-size: 16px;
    color:black;
	padding-bottom: env(safe-area-inset-bottom);
    background-color: white;
	width: 100%;
	height: 100%;
	div{
		box-sizing: border-box;
	}
}


/* 宽高 */
.w-100 {
	width: 100%;
}

.w-50 {
	width: 50%;
}

.h-100 {
	height: 100%;
}

.h-50 {
	height: 50%;
}

/* 图片大小 */
.w-345 {
	width: 330rpx;
}

.img-345 {
	width: 330rpx;
	height: 330rpx;
}

.img-160 {
	width: 160rpx;
	height: 160rpx;
}

.img-80 {
	width: 80rpx;
	height: 80rpx;
}

	.image {
		background-color: black;
		width: 690rpx;
		height: 320rpx;
		
	}

/* 阴影 */
.shadow {
	box-shadow: 0 0 15rpx #999999;
}
.shadow1 {
	box-shadow: 0 0 5rpx #999999;
}
.shbdow {
	box-shadow: 0 5px 10px 0 rgba(0,0,0,.1)
}

.flex1{
	flex:1;
}

.flexnone {
	flex: none;
}

.wrap {
	flex-wrap: wrap;
}
.bold {
    font-weight: bold;
}

/* 定义字体大小 */

.xxxl{
	font-size: 42rpx;
}
.xxl {
    font-size: 36rpx;
}

.xl {
    font-size: 34rpx;
}

.lg {
    font-size: 32rpx;
}

.md {
    font-size: 30rpx;
}
.nr {
  font-size: 28rpx;
}
.sm {
    font-size: 26rpx;
}

.xs {
    font-size: 24rpx;
}

.xxs {
    font-size: 22rpx;
}

.f-w{
	font-weight: 600;
}

/* 定义常用外边距 */

.ml5 {
    margin-left: 5rpx;
}

.ml10 {
    margin-left: 10rpx;
}

.ml20 {
    margin-left: 20rpx;
}

.ml30 {
    margin-left: 30rpx;
}

.mr5 {
    margin-right: 5rpx;
}

.mr10 {
    margin-right: 10rpx;
}

.mr20 {
    margin-right: 20rpx;
}

.mr30 {
    margin-right: 30rpx;
}

.mt5 {
    margin-top: 5rpx;
}

.mt10 {
    margin-top: 10rpx;
}

.mt20 {
    margin-top: 20rpx;
}

.mt30 {
    margin-top: 30rpx;
}
.mt40 {
    margin-top: 40rpx;
}

.mt80 {
    margin-top: 80rpx;
}
.mb5 {
    margin-bottom: 5rpx;
}

.mb10 {
    margin-bottom: 10rpx;
}

.mb20 {
    margin-bottom: 20rpx;
}

.mb30 {
    margin-bottom: 30rpx;
}

.mblo20{
	margin-block: 20rpx;
}

// 当前页面常用布局
.pt30{
	padding-top: 30rpx;
}
.p-in100{
	padding-inline: 100rpx;
}
.p-in50{
	padding-inline: 50rpx;
}
.p-in20{
	padding-inline: 20rpx;
}
.p-in30{
	padding-inline: 30rpx;
}
.p-in10{
	padding-inline: 10rpx;
}
.m-in20{
	margin-inline: 20rpx;
}
.m-in30{
	margin-inline: 30rpx;
}
.m-in40{
	margin-inline: 40rpx;
}
.m-bl25{
	margin-block: 25rpx;
}
.m-bl15{
	margin-block: 15rpx;
}
.p-block-list{
	padding-block: 30rpx;
}
.p-block{
	padding-block: 120rpx;
}
.p-block10{
	padding-block: 10rpx;
}
.pt50{
	padding-top: 50rpx;
}
.pt30{
	padding-top: 30rpx;
}
.p-block20{
	padding-block: 20rpx;
}

// 自定义导航栏样式
.status_bar {
	height: var(--status-bar-height);
	width: 100%;
}

.content{
	width: 100%;
	height: 100%;
	box-sizing: border-box;
}

.radius-10-bottom{
	border-radius: 0rpx 0rpx 10rpx 10rpx;
}

.center-flex{
	display: flex;
	align-items: center;
	
}
.radius-15{
	border-radius: 15rpx;
}

.radius-50{
	border-radius: 50%;
}

.text{
	font-size: 24rpx;
	font-family: PingFang;
	font-weight: bold;
	color: #999999;
	line-height: 48rpx;
}

/* 定义常用的弹性布局 */
.wrap {
    flex-wrap: wrap;
}

.row {
    display: flex;
    align-items: center;
}

.row-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.row-end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.row-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.row-beteeen1{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.row-beteeen2{
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
}
.row-round1{
	display: flex;
	// align-items: center;
	justify-content: space-around;
}
.row-evenly{
	display: flex;
	align-items: center;
	justify-content: space-evenly;
}
.row-around {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.row-noBe{
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
}
.column {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.d-column{
	display: flex;
	flex-direction: column;
}

.column-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.column-around {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

.column-end {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

.column-between {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.flex-nowrap{
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
}

/*
 * @Description: 绝对定位居中（子元素）
 */
 .absolute-center {
  margin: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.absolute-culumn{
	position: absolute;
	top: 0;
}

.fixed-top{
	position: fixed;
	top: 0;
	z-index: 999;
}

.fixed-bottom{
	position: fixed;
	bottom: 0;
	z-index: 99999;
}

.bor-bot{
	border-bottom: 1rpx solid #D4D4D4 ;
}

// 隐藏滚动条
::-webkit-scrollbar {
    width: 0px;
    height: 0px;
    background-color: transparent;
    display: none
}

/* 高宽及背景 高宽分别对应横竖滚动条的尺寸 */
::-webkit-scrollbar {
  width: 0px;
  height: 10px;
  background-color: red;
}

/* 定义滚动条轨道 内阴影+圆角 */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 0px;
  background-color: #F5F5F5;
}

/* 定义滑块 内阴影+圆角 */
::-webkit-scrollbar-thumb {
  border-radius: 1px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  background-color: #555;
}

// 内容溢出出现滚动条不影响内容宽度

.content-overflow {
  overflow: auto;
  overflow: overlay;
}

/* 超出隐藏 */
.line1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.line2 {
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

// 文字样式相关

/* 中划线 */
.line-through {
    text-decoration: line-through;
}

.text-outline {
  color: #fff; /* 文字颜色 */
  text-shadow: 
    1px 1px 0 #000,
    -1px -1px 0 #000, 
    1px -1px 0 #000, 
    -1px 1px 0 #000; /* 文字边框，可以设置不同的阴影位置和颜色来实现描边效果 */
}


.text-stroke {
  color:#fff; /* 文字颜色 */
  -webkit-text-stroke: 1px #000; /* 设置文字描边样式，第一个参数为描边宽度，第二个参数为描边颜色 */
  text-stroke:1px #000; /* 写法类似于-webkit-text-stroke，兼容不同浏览器 */
}

.text-demo{
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #000000;
	line-height: 36rpx;
}




// 文字左右各一条线
 .text-style{
            width:170px;
            height:50px;
            line-height:50px;
            text-align:center;
            position:relative;
        }


        .text-style::after, .text-style::before{
            position: absolute;
            width:30px;
            height:2px;
            background:#F6AC73;
            content:'';
            top:25px;
        }

 

        .text-style::after{
            left:0;
        }


        .text-style::before{
            right:0;
        }



/* br60 */
.br60 {
    border-radius: 60rpx;
}




/* 初始化按钮 */
page button {
    padding: 0;
    margin: 0;
    background-color: transparent;
    font-weight: normal;
    font-size: 28rpx;
    overflow: unset;
	margin-left: 0;
	margin-right: 0;
}
page button::after {
	border: none;
}
	
page input {
	font-size: 28rpx;
}
button[type=primary] {
	background-color: white;
}
.button-hover[type=primary] {
	background-color: white;
}
/* 按钮大小 */
button[size="xs"]{
    line-height: 58rpx;
    height: 58rpx;
    font-size: 26rpx;
    padding: 0 30rpx;
}

button[size="sm"] {
    line-height: 62rpx;
    height: 62rpx;
    font-size: 28rpx;
    padding: 0 30rpx;
}

button[size="md"]{
    line-height: 70rpx;
    height: 70rpx;
    font-size: 30rpx;
    padding: 0 30rpx;
}
button[size="lg"]{
    line-height: 80rpx;
    height: 80rpx;
    font-size: 32rpx;
    padding: 0 30rpx;
}


.buttonstyle{
	width: 150rpx;
	height: 65rpx;
	background: #F38E40;
	border-radius: 32rpx;
}

.buttonstyle2{
	width: 124rpx;
	height: 52rpx;
	background: #F38E40;
	border-radius: 26rpx;
}

.buttonstyle3{
	width: 144rpx;
	height: 70rpx;
	border-radius: 40rpx;
}

//******图标******/

.icon-xs {
    @include icon-image(28rpx);
}

.icon-sm {
    @include icon-image(30rpx);
}

.icon {
	@include icon-image(34rpx);
}
.icon-md {
	@include icon-image(44rpx);
}
.icon-lg {
    @include icon-image(52rpx);
}

.icon-xl {
    @include icon-image(64rpx);
}

.icon-xxl {
    @include icon-image(120rpx);
}

.img-null {
    width: 300rpx;
    height: 300rpx;
}
